<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>给你的信</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: linear-gradient(to bottom, #e0f7e0, #c8e6c9, #a5d6a7);
            font-family: "华文行楷", "STKaiti", "KaiTi", serif;
            min-height: 100vh;
            overflow: hidden;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding-top: 20px;
        }
        
        .letter-container {
            width: 50%;
            min-height: 80vh;
            max-height: 80vh;
            background-color: #fff;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            position: relative;
            overflow-y: auto;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s, transform 0.5s;
            margin-top: 0;
            z-index: 10;
        }
        
        .letter-container.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .letter-header {
            text-align: center;
            padding-top: 30px;
            margin-bottom: 20px;
        }

        .letter-header h2 {
            color: #2E7D32;
            font-size: 2rem;
            margin-bottom: 10px;
        }

        .letter-content {
            line-height: 1.8;
            color: #333;
            font-size: 1.1rem;
            margin: 0 40px;
            position: relative;
        }

        .letter-content::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                to bottom,
                transparent,
                transparent 19px,
                rgba(0, 0, 0, 0.05) 20px,
                rgba(0, 0, 0, 0.05) 21px
            );
            pointer-events: none;
        }

        .letter-content p {
            text-indent: 2em;
            margin-bottom: 15px;
            position: relative;
            z-index: 1;
        }

        .letter-footer {
            text-align: right;
            margin-top: 40px;
            padding-top: 20px;
            padding-right: 40px;
            border-top: 1px solid #a5d6a7;
            position: relative;
            z-index: 1;
        }

        .letter-footer p {
            color: #2e7d32;
            font-weight: bold;
        }

        /* 图片装饰 */
        .decoration {
            position: absolute;
            width: 25%;
            height: 100%;
            top: 0;
            z-index: 5;
            object-fit: contain;
        }

        .left-decoration {
            left: 0;
        }

        .right-decoration {
            right: 0;
            transform: scaleX(-1);
        }

        /* 音乐控制样式 */
        .music-control {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 100;
        }

        .music-control button {
            padding: 10px 15px;
            background-color: rgba(46, 125, 50, 0.8);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-family: "华文行楷", "STKaiti", "KaiTi", serif;
        }

        .music-control button:hover {
            background-color: rgba(46, 125, 50, 1);
        }
    </style>
</head>
<body>
    <!-- 装饰图片 -->
    <img src="123.png" class="decoration left-decoration">
    <img src="123.png" class="decoration right-decoration">
    
    <div class="letter-container">
        <div class="letter-header">
            <h2>给亲爱的刘女士</h2>
            <p>母亲节快乐!</p>
        </div>
        
        <div class="letter-content">
            <p>亲亲老妈：</p>
            
            <p>现在是二零二五年五月八日的凌晨，大概十二点半左右吧。临上床前室友突然说母亲节快到了，我才意识到这件事。想来想去，以我现在的经济能力也没什么送的出手的。就随便写些文字吧。当然，只是现在没有而已，未来肯定会有的。因为想到送些贺卡啊，花啊，什么的，没有什么实用价值，虽然金价降了，但听室友说一条金链子要2000多，虽然我也能买啦，但果然还是大二再送吧。先好好期待一下吧，刘女士。</p>
            
            <p>说实话，感觉我们家和别的人家不太一样。这种不一样不是普遍性的，是那种独独突出来的。你想啊，我都这么大了，对你们还是不太了解，大家对于其他人的认识好像还总是停留在小时候。就像一说到你喜欢吃的东西，我就只能想到凉皮和甜的点心，还有鱼。喜欢喝的……嗯，总是下意识想到椰汁。喜欢的颜色是绿色，因为说是对眼睛好。然后喜欢在下雨天睡觉，说这样会很舒服。这是我以前的认知，一直没有更新。但是人总是会变得吧，比如，自从开始减肥了，我就越来越觉得辣味的东西也不是很好吃了。</p>
            
            <p>虽然也可能是每个人的特性不一样啦。我那个武穴的室友，偶尔也会说到家里的事，什么妈妈叫我晚上给她打电话啊，家里叫我定期聊天啊之类的。我们家这样的却很少嗷，我知道，嗯……嘛，关怀的形式不同嘛，这只是因为我妈为人不偏好亲密而已。所以导致我也对亲密关系有些迟钝。总觉得有时候对其他人的行为不能理解。也不是什么大不了的事，只是会小小地觉得困惑罢了。</p>
            
            <p>所以说啊。我想说的还是那句话。多爱惜点自己，多关心点自己，多在乎点自己。没有什么是过不去的坎骜。有些亲密的话总是羞于启齿，只能在脑子里打转，感觉说出口就会失去了脸面，会觉得不好意思，甚至还有点恼羞成怒，想想也就是不够坦率。多点耐心吧，妈妈。人总是会长大的，总是会意识到时间慢慢流逝，害怕有些话还没说出口。正所谓，“树欲静而风不止，子欲养而亲不待嘛”我想就算是杨心豪那样没心没肺的人肯定也不能接受这样的未来。你要是反驳自己身体很好，那我可是不相信的哦。不是这儿有问题就是那儿有问题，小问题堆积起来就是大问题了嗷。</p>
            
            <p>我想人渐渐长大的标志就是担忧的事物变得越来越多了。想未来，想爱人，想亲人。</p>
            
            <p>眼界宽阔了，发现以前让我十分苦恼，不理解的事也不过如此。就像董雨薇，你还记得她吧。前些日子又来信息轰炸我，发了一大串文字请求我的原谅，还谈到把我的微信好友删了，要不是她说我还没意识到这件事，足以看出我确实有些迟钝了。但我不想鸟她，就把她扔在了一边，没有回复她。直觉和她扯上联系，这样的拉扯未来肯定还会发生。说实话，我挺讨厌这种麻烦的。尤其是明知这样做有问题还是这样去做的蠢蛋。</p>
            
            <p>啊呀，乱七八糟的说了也有一千字了。感觉说的天马行空，可能不知所云，云里雾里吧。不重要，重要的就是知道天大地大，自己最大就行了。然后呢，再多一点点耐心。多一些坦率。就OK了。</p>
            
            <p>先这样吧，等我练练文笔后，能准确描述我的想法后，再继续聊吧。期待下一次的信封吧，妈妈。</p>
            
            <div class="letter-footer">
                <p>永远爱你的小孩</p>
                <p>2025年5月11日</p>
            </div>
        </div>
    </div>

    <!-- 音乐控制 -->
    <div class="music-control">
        <button id="musicToggle">暂停音乐</button>
    </div>

    <audio id="backgroundMusic" loop>
        <source src="audio/MOM.mp3" type="audio/mpeg">
        您的浏览器不支持音频元素。
    </audio>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const letterContainer = document.querySelector('.letter-container');
            const musicToggle = document.getElementById('musicToggle');
            const backgroundMusic = document.getElementById('backgroundMusic');
            let isPlaying = true;

            // 页面加载完成后，自动播放音乐
            setTimeout(function() {
                letterContainer.classList.add('visible');
                backgroundMusic.play();
            }, 100);

            // 音乐控制逻辑
            musicToggle.addEventListener('click', function() {
                if (isPlaying) {
                    backgroundMusic.pause();
                    musicToggle.textContent = '播放音乐';
                } else {
                    backgroundMusic.play();
                    musicToggle.textContent = '暂停音乐';
                }
                isPlaying = !isPlaying;
            });
        });
    </script>
</body>
</html>